import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Table, Space, Button, Row, Col, Tree } from 'antd';
import { FolderOutlined, FileOutlined } from '@ant-design/icons';
import './index.less';

@inject('store')
@observer
class TestTree extends Component {
  // 获取解析后的树状结构
  getTree(pages) {
    if (!pages) return;
    return pages.map((page, index) => {
      const tests = page.tests.map((test, sort) => {
        return {
          ...test,
          key: `page_${index}-test_${sort}`,
        };
      });
      return {
        title: `${page.pageName}（${tests.length}）`,
        children: tests,
        key: `page_${index}`,
      };
    });
  }
  selectElement = (id) => {
    let idStr = id[0];
    this.props.store.project.selectElement(idStr);
  };

  createPage() {
    this.props.store.project.createPage();
  }
  createTest() {
    this.props.store.project.createTest();
  }

  render() {
    const { projects, projectActive, pageActive, testActive } = this.props.store.project;
    const project = projects[projectActive];
    if (!project) return null;
    const treeData = this.getTree(project.pages);
    return (
      <div className="test-tree">
        {treeData && (
          <div className="toolbar">
            <div className="icons">
              <FolderOutlined onClick={() => this.createPage()} />
              <FileOutlined onClick={() => this.createTest()} />
              {/* <CreateElement generCode={generCode} /> */}
            </div>
            <Tree
              showLine={true}
              showIcon={false}
              defaultExpandedKeys={['0-0-0']}
              onSelect={this.selectElement}
              treeData={treeData}
            />
          </div>
        )}
      </div>
    );
  }
}
export default TestTree;
